<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="../js/echarts.js"></script>
<style>
	body::-webkit-scrollbar {
		display: none;
	}
	#main3 {
		width: 100%;
		height: 100vh;
		position: relative;
	}
	#main3 .title {
		position: absolute;
		top: 50px;
		width: 100vw;
		height: 40px;
		line-height: 40px;
		text-align: center;
		margin: 0 -85px;
		padding: 0;
		font-size: 25px;
		font-weight: 900;
	}

	.content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid black;
		border-radius: 10px;
		padding: 20px;
	}
</style>
<div class="row">
	<div class="col-md-12 col-lg-12">
		<div class="theory-lab-title">
			<ul>
				<li class="get-theory">理论课</li>
				<li class="get-lab">实验课</li>

				<shiro:hasRole name="teacher">
					<li class="new-lesson">新建课堂</li>
					<li onclick="TdOnClick1()">任务得分</li>
				</shiro:hasRole>
			</ul>
		</div>
	</div>
	<div class="col-md-12 col-lg-12">
		<!--理论课 -->
		<div class="theory-list">
			<ul id="theoryList">
				
			</ul>
		</div>
		<!--实验课 -->
		<div class="lab-list">
			<ul id="labList">
			
			</ul>
			
		</div>
		<div class="page-content" id="lessonPage">
			<nav class="pagination" role="navigation">
				<a class="last-page">
					<i class="fa fa-angle-left"></i>
				</a>
				<span class="page-number">../..</span>
				<a class="next-page">
					<i class="fa fa-angle-right"></i>
				</a>
			</nav>
		</div>
		<div style="height: 50px"></div>
	</div>
	
	
	<!-- 新建课堂 -->
	<div class="modal fade" id="newLesson">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" style="display:inline;float:left;">新建课堂</h4>
					<button type="button" class="close" data-dismiss="modal" style="display:inline;float:right;">&times;</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-xs-12">
							<label>课堂类型</label>
							<select class="form-control" id="createLessonType">
								<option value="THEORY" selected="selected">理论课</option>
								<option value="LAB">实验课</option>
							</select>
						</div>
						<div class="col-xs-12">
							<label>开始时间</label>
							<input type="datetime-local" class="form-control" name="createBeginDate">
						</div>
						<div class="col-xs-12">
							<label>结束时间</label>
							<input type="datetime-local" class="form-control" name="createEndDate">
						</div>
						<div class="col-xs-12">
							<label>上课地点</label>
							<input type="text" class="form-control" name="createLocation">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" id="createLessonButton">确定</button>
				</div>
			</div>
		</div>
	</div>
	
</div>
<div id="avgScore" style="display: none">
	<div id="main3">
		<div class="title">任务得分</div>
		<div class="content">
			<div id="main1" style="width: 600px;height:400px;"></div>
		</div>
	</div>
</div>

<script>

	$(function() {
		$(".new-lesson").click(function() {
			$("#newLesson").modal("show");
		});
		$("#createLessonButton").click(createLesson);
	})

	function TdOnClick1() {
		console.log(data)
		let className = data.data.classView.className;

		// console.log(id)
		// window.location.href = CONTEXT_PATH+"avgScore?className="+className;
		$.get(CONTEXT_PATH+"avgScore?className="+className,function (data) {
		}).then(function (data) {
			var chartDom = document.getElementById('main1');
			var myChart = echarts.init(chartDom);
			var option;

			var colors = ['#5470C6', '#EE6666'];

			option = {
				color: colors,
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				grid: {
					right: '20%'
				},
				toolbox: {
					feature: {
						dataView: {show: true, readOnly: true},
						saveAsImage: {show: true}
					}
				},
				legend: {
					data: ['平均分', '回答人数']
				},
				xAxis: [
					{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						data: data.allTaskNames
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '得分',
						min: 0,
						max: 100,
						position: 'right',
						axisLine: {
							show: true,
							lineStyle: {
								color: colors[0]
							}
						},
						axisLabel: {
							formatter: '{value}'
						}
					},
					{
						type: 'value',
						name: '人数/个',
						min: 0,
						max: 100,
						position: 'left',
						axisLine: {
							show: true,
							lineStyle: {
								color: colors[1]
							}
						},
						axisLabel: {
							formatter: '{value}'
						}
					}
				],
				series: [
					{
						name: '平均分',
						type: 'bar',
						data: data.allAvgScores
					},
					{
						name: '回答人数',
						type: 'line',
						yAxisIndex: 1,
						data: data.allAnsNums
					}
				]
			};

			option && myChart.setOption(option);

			layer.open({
				type: 1,
				title: className+'班级的任务得分',
				fixed: false, //不固定
				maxmin: true,
				closeBtn: 1,
				skin: 'layui-layer-molv',
				area: ['90vw', '90vh'],
				offset: '-230px',
				content: $("#avgScore"),

			});
		})


	}
	
	var createLesson = function(){
		var lessonType=$("#createLessonType  option:selected").val();
		var beginDate = parseDate($("input[name='createBeginDate']").val());
		var endDate = parseDate($("input[name='createEndDate']").val());
		var location = $("input[name='createLocation']").val();
		var json={
				classId:data.data.classView.id,
				type:lessonType,
				beginDate:beginDate,
				endDate:endDate,
				location:location
		};
		$.post(CONTEXT_PATH+"lesson/ajaxCreate", {
			data : JSON.stringify(json)
		}, function(data) {
			if(data.status=="success"){
				window.location.reload();
			}else{
				alert("请检查课堂信息！");
			}
		});
	}

</script>